<template>
	<div class='project_interview_container'>
		<!-- <div class='ai_container'><AIConsulting size='small'/></div> -->
		<div class='project_container'>
			<div class='project_container_projectName'>
				{{projectData.name}}
				<a-button v-if='projectData.registrationStatus==1&&route.query.auditStatus>=0' type="primary" class='quitProjectBtn'
					@click='quitProject'>退出项目</a-button>
			</div>
			<div class='project_container_message'>

				<div class='message_Box'>
					<div class='message_label'>项目简介: </div>
					<div class='message_content'>
						<div v-html="projectData.describe||'暂无' "></div>
					</div>
				</div>

				<div class='message_Box'>
					<div class='message_label'>报名状态: </div>
					<div class='message_content statusContent'>
						{{signUpStatusLabel[projectData.registrationStatus]}}
					</div>
				</div>

				<!-- <div class='message_Box'>
					<div class='message_label jobLabel'>
						<div><span>项目成员: <span class='jobLabelTip'></span></span></div>
					</div>
					<div class='message_content job_content'>
						<div class='jobBox' v-for="(item,i) in projectData.projectStudentVOList">
							<div class='jobBox_img_and_skills'>
								<div class='jobImgBox'>
									<img src="@/assets/user.png" alt="">
								</div>
								<div class='jobBox_skills'>
									<div>姓名：{{item.studentName}}</div>
									<a-tooltip color='rgba(0,0,0,0.6)'>
										<template #title>{{item.jobName}}</template>
										<div class='jobBox_job_content'>职位：{{item.jobName}}</div>
									</a-tooltip>
									<a-tooltip color='rgba(0,0,0,0.6)'>
										<template #title>{{item.skill}}</template>
										<div class='jobBox_skills_content'>技能：{{item.skill}}</div>
									</a-tooltip>
								</div>
							</div>
						</div>
					</div>
				</div>
 -->
				<div class='message_basic_information'>

					<div class='message_Box'>
						<div class='message_label'>所属年级: </div>
						<div class='message_content'>
							{{projectData.grade}}
						</div>
					</div>

					<div class='message_Box'>
						<div class='message_label'>所属班级: </div>
						<div class='message_content'>
							<span v-if='projectData.gradeClassList&&projectData.gradeClassList.length>0'
								v-for='(item,i) in projectData.gradeClassList'>
								{{item.gradeClassName}}{{i==projectData.gradeClassList.length-1?'':'、'}}
							</span>
							<template v-if='!(projectData.gradeClassList&&projectData.gradeClassList.length>0)'>
								暂无
							</template>
						</div>
					</div>

					<div class='message_Box'>
						<div class='message_label'>项目难度: </div>
						<div class='message_content'>
							<a-rate v-model:value="projectData.difficulty" disabled />
						</div>
					</div>

					<div class='message_Box'>
						<div class='message_label'>项目类型: </div>
						<div class='message_content'>
							{{projectData.category}}
						</div>
					</div>

					<div class='message_Box'>
						<div class='message_label'>项目报名类型: </div>
						<div class='message_content'>
							{{projectData.template?{1:'多组协作',2:'经典'}[projectData.template]:'暂无'}}
						</div>
					</div>

					<div class='message_Box'>
						<div class='message_label'>项目成员总数: </div>
						<div class='message_content'>
							{{projectData.totalMemberLimit?`${projectData.totalMemberLimit}人`:'暂无'}}
						</div>
					</div>

					<div class='message_Box' v-if='projectData.template==1'>
						<div class='message_label'>小组人数限制: </div>
						<div class='message_content'>
							{{projectData.groupMemberLimit?`每组最多${projectData.groupMemberLimit}人`:'暂无'}}
						</div>
					</div>

					<div class='message_Box'>
						<div class='message_label'>开发模型: </div>
						<div class='message_content'>
							{{projectData.devModelName||'暂无'}}
						</div>
					</div>

				</div>
				<div class='message_Box'>
					<div class='message_label'>关联课程: </div>
					<div class='message_content'>
						<span v-for='(item,i) in projectData.courseList'>
							{{item.courseName}}{{i==projectData.courseList.length-1?'':'、'}}
						</span>
					</div>
				</div>

				<div class='message_Box'>
					<div class='message_label'>评分标准: </div>
					<div class='message_content'>
						<div v-html="projectData.scoreStandard||'暂无' "></div>
					</div>
				</div>

				<div class='message_Box'>
					<div class='message_label'>项目目标: </div>
					<div class='message_content'>
						<div v-html="projectData.target||'暂无' "></div>
					</div>
				</div>

				<div class='message_Box'>
					<div class='message_label'>项目周期: </div>
					<div class='message_content'>
						{{formatDate(projectData.startTime)}}至{{formatDate(projectData.endTime)}}
					</div>
				</div>
				<div class='message_Box' v-if='projectData.mainTeacher'>
					<div class='message_label '>主指导老师: </div>
					<div class='message_content job_content'>
						<a-tooltip>
							<template v-if='projectData.mainTeacher.introduceYourself'
								#title>{{projectData.mainTeacher?projectData.mainTeacher.introduceYourself:''}}</template>
							<div class='jobBox'>
								<div class='jobBox_img_and_skills'>
									<div class='jobImgBox'>
										<img src="@/assets/user.png" alt="">
									</div>
									<div class='jobBox_skills'>
										<div>姓名：{{projectData.mainTeacher?projectData.mainTeacher.name:'暂无'}}</div>
										<div class='jobBox_job_content'>
											专业：{{projectData.mainTeacher.orientation?projectData.mainTeacher.orientation:'暂无'}}
										</div>
									</div>
								</div>
							</div>
						</a-tooltip>
					</div>
				</div>
				<div class='message_Box' v-if='projectData.coTeacherList&&projectData.coTeacherList.length>0'>
					<div class='message_label '>副指导老师: </div>
					<div class='message_content job_content'>
						<div class='jobBox' v-for='item in projectData.coTeacherList'>
							<a-tooltip>
								<template #title v-if='item.introduceYourself'>{{item.introduceYourself}}</template>
								<div class='jobBox_img_and_skills'>
									<div class='jobImgBox'>
										<img src="@/assets/user.png" alt="">
									</div>
									<div class='jobBox_skills'>
										<div>姓名：{{item.name||'暂无'}}</div>
										<div class='jobBox_job_content'>专业：{{item.orientation||'暂无'}}</div>
									</div>
								</div>
							</a-tooltip>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import AIConsulting from '@/components/AIConsulting.vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import {
		getProjectMessage
	} from '@/request/projectSquare.js'
	import {
		quitMyProject,
		getJobId
	} from '@/request/projectManagement.js'
	import {
		Modal
	} from 'ant-design-vue';
	import {
		ExclamationCircleOutlined
	} from '@ant-design/icons-vue';
	import {
		createVNode
	} from 'vue';
	import {
		message
	} from 'ant-design-vue';
	import MarkdownIt from 'markdown-it'

	const router = useRouter()
	// const route= useRoute()
	//markdown渲染
	function markdownIt(){
		console.log('markdown渲染')
		const md = new MarkdownIt();
		console.log(projectData)
		console.log(projectData.name)
		if(projectData.describe&&projectData.describe.includes('###')){
			projectData.describe=md.render(projectData.describe);
		}
		if(projectData.scoreStandard&&projectData.scoreStandard.includes('###')){
			projectData.scoreStandard=md.render(projectData.scoreStandard);
		}
		if(projectData.target&&projectData.target.includes('###')){
			projectData.target=md.render(projectData.target);
		}
	}

	//退出项目
	// function quitProject() {
	// 	Modal.confirm({
	// 		title: `你确定要退出该项目吗？`,
	// 		icon: createVNode(ExclamationCircleOutlined),
	// 		async onOk() {
	// 			let res = await quitMyProject(projectData.id)
	// 			console.log('res', res)
	// 			if (res.code == 200) {
	// 				message.success('退出项目成功')
	// 				router.replace({name:'PersonalCenter'})
	// 			} else {
	// 				message.error('退出项目失败')
	// 			}
	// 		},
	// 		onCancel() {},
	// 	});
	// }
	function quitProject() {
		Modal.confirm({
			title: `你确定要退出该项目吗？`,
			icon: createVNode(ExclamationCircleOutlined),
			async onOk() {
				let jobData = await getJobId(route.query.id)
				if (!jobData || !jobData.data || !jobData.data.id) {
					message.error('在本项目下没有查询到您的信息')
					return
				}
				let res = await quitMyProject({
					projectJobId: jobData.data.id
				})
				console.log('jobData', jobData)
				if (res && res.code == 200) {
					message.success('退出项目成功')
					router.replace({
						name: 'PersonalCenter'
					})
				} else {
					message.error('退出项目失败')
				}
				Modal.destroyAll()
			},
			onCancel() {},
		});
	}

	let open = ref(true)
	onMounted(async () => {
		const id = route.query.id;
		let res = await getProjectMessage(id);
		for (let key in res.data) {
			if (typeof res.data[key] == 'string') {
				projectData[key] = `${res.data[key]}`.trim() || '暂无'
			} else {
				projectData[key] = res.data[key]
			}

		}
		markdownIt()
		console.log('项目管理', res)
	})

	const route = useRoute();
	let projectData = reactive({})

	//项目日期处理
	function formatDate(dateString) {
		// 将输入的字符串转换为 Date 对象
		const date = new Date(dateString);

		// 获取年份、月份和日期
		const year = date.getFullYear();
		const month = date.getMonth() + 1; // 月份从0开始，需要加1
		const day = date.getDate();

		// 返回格式化后的字符串
		return `${year}年${month}月${day}日`;
	}

	let signUpStatusLabel = ['未开始', '招募中', '已截止']
</script>

<style lang='scss' scoped>
	@import '@/styles/public.scss';
	$aiContainerWidth:20%;
	$aiContainerHeight:60vh;
	$aiContainerMarginRight:10px;
	$projectNameHeight:50px;
	$messageContainerPaddingTop:15px;
	$messageContainerPaddingRight:20px;

	.project_interview_container {
		width: $viewMinWidth;
		height: 100%;
		padding: 20px 10%;
		/* padding-right:30px; */
		display: flex;


		/* .ai_container{
			width:$aiContainerWidth;
			height:$aiContainerHeight;
			margin-right:$aiContainerMarginRight;
			display: flex;
			align-items:center;
			justify-content: center;
			margin:auto 0;
		} */

		.project_container {
			width: 100%;
			height: 100%;
			background-color: $theme1BgColor2;
			border-radius: 10px;

			.project_container_projectName {
				width: 100%;
				height: $projectNameHeight;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: white;
				border-radius: 10px 10px 0 0;
				font-weight: bold;
				font-size: 18px;
				position: relative;

				.quitProjectBtn {
					position: absolute;
					top: 50%;
					right: 2%;
					transform: translateY(-50%);
				}

			}

			.project_container_message {
				width: 100%;
				height:calc(100% - #{$projectNameHeight});
				padding: $messageContainerPaddingTop $messageContainerPaddingRight;
				overflow-y: auto;
				@include hoverShowScrollBar();
				
				.message_basic_information {
					max-width: 100%;
					align-self: center;
					display: -ms-grid;
					display: grid;
					/* 启用 Grid 布局 */
					grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
					/* 自动填充列，最小宽度200px */
					gap: 0px 15px;
					/* 设置子元素之间的间距 */
					align-items: start;
					/* 垂直对齐 */
				}
				

				.message_Box {
					margin-bottom: 20px;


					.message_label {
						margin-bottom: 10px;
					}

					.message_content {
						width: 100%;
						background-color: white;
						padding: 12px;
						line-height: 22px;
						border-radius: 5px;
					}

					.statusContent {
						@include FlexCenterAndCenter();
					}

					$jobBoxWidth:220px;

					.job_content {
						background-color: transparent;
						display: grid;
						/* 启用 Grid 布局 */
						grid-template-columns: repeat(auto-fill, minmax($jobBoxWidth, 1fr));
						/* 自动填充列，最小宽度200px */
						gap: 10px;
						/* 设置子元素之间的间距 */
						align-items: start;
						/* 垂直对齐 */

						.active {
							border: 2px solid $theme1BgColorDeep;
						}

						.jobBox {
							@include FlexCenterAndCenter();
							justify-content: flex-start;
							min-width: $jobBoxWidth;
							height: 120px;
							padding: 10px;
							border-radius: 10px;
							background-color: white;


							.jobBox_img_and_skills {
								display: flex;
								align-items: center;
								width: 100%;
								/* justify-content: space-between; */

								$jobImgBox: 50px;
								$jobImgBoxMarginRight: 10px;

								.jobImgBox {
									width: $jobImgBox;
									height: $jobImgBox;
									border-radius: 50%;
									margin-right: $jobImgBoxMarginRight;

									img {
										width: 100%;
										height: 100%;
										object-fit: cover;
									}
								}

								.jobBox_skills {
									width:calc(100% - #{$jobImgBox} - #{$jobImgBoxMarginRight});

									.jobBox_job_content {
										width: 100%;
										display: inline-block;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;

									}

									.jobBox_skills_content {
										display: -webkit-box;
										/* 使用 Flexbox 布局 */
										-webkit-box-orient: vertical;
										/* 垂直排列盒子 */
										-webkit-line-clamp: 2;
										/* 限制显示的行数 */
										overflow: hidden;
										/* 隐藏超出部分 */
										text-overflow: ellipsis;
										/* 使用省略号 */
									}
								}

							}

							.jobBox_jobNum {
								display: flex;
								align-items: center;
								/* justify-content: space-between; */
								flex-wrap: wrap;
								margin-top: 10px;

								&>div {
									margin-right: 10px;
								}

								&>div:nth-last-child(1) {
									margin-right: 0px;
								}
							}
						}
					}

					.jobLabel {
						display: flex;
						align-items: center;
						justify-content: space-between;

						:deep(.ant-btn) {
							height: 30px;
							font-size: 13px;
						}

						&>div {
							@include FlexCenterAndCenter();

							.jobLabelTip {
								font-size: 12px;
								color: grey;

							}
						}
					}
				}
			}
		}
	}
</style>
